import { ref, computed, markRaw } from 'vue'
import { defineStore } from 'pinia'

export const useRoomStore = defineStore('room', () => {
  function getImageHref(key: string) {
    return new URL(`/src/assets/images/${key}`, import.meta.url).href
  }
  const key = ref('living-room')
  const rooms = ref([
    // {
    //   name: '客厅过道',
    //   key: 'living-room-out',
    //   map: getImageHref('map_living_room_out.jpg'),
    //   showSwitch: true,
    //   mapPos: {
    //     top: 80,
    //     left: 50
    //   },
    //   hotPoints:[]
    // },
    {
      name: '客厅',
      key: 'living-room',
      map: getImageHref('map_living_room.jpg'),
      showSwitch: true,
      mapPos: {
        top: 80,
        left: 50,
        rotate: 80
      },
      hotPoints: [
        {
          key: "tv",
          value: "电视",
          desc: "智能电视",
          cover: getImageHref('cover_living_room_tv.png'),
          pos: [15, 2, 0]
        },
        {
          key: "art",
          value: "艺术品",
          desc: "BE@RBRICK",
          cover: getImageHref('cover_living_room_art.png'),
          pos: [10, 0, -10]
        },
        {
          key: "plant",
          value: "绿植",
          desc: "自由呼吸",
          cover: getImageHref('cover_living_room_plant.png'),
          pos: [15, 1, 14]
        },
        {
          key: "sofa",
          value: "沙发",
          desc: "现在家居",
          cover: getImageHref('cover_living_room_sofa.png'),
          pos: [-10, -4, 10]
        }
      ]
    },
    {
      name: '卧室',
      key: 'bed-room',
      map: getImageHref('map_bed_room.jpg'),
      showSwitch: true,
      mapPos: {
        top: 35,
        left: 100,
        rotate: 90
      },
      hotPoints: [
        {
          key: "bed",
          value: "床",
          desc: "温暖的床",
          cover: getImageHref('cover_bed_room_bed.png'),
          pos: [15, -2, 0]
        }
      ]
    },
    {
      name: '厨房',
      key: 'kitchen',
      map: getImageHref('map_kitchen.jpg'),
      showSwitch: true,
      mapPos: {
        top: 70,
        left: 100,
        rotate: 115
      },
      hotPoints: [
        {
          key: "fridge",
          value: "冰箱",
          desc: "智能家电",
          cover: getImageHref('cover_kitchen_fridge.png'),
          pos: [-2, 2, -15]
        },
        {
          key: "fruit",
          value: "水果",
          desc: "美味食物",
          cover: getImageHref('cover_kitchen_fruit.png'),
          pos: [15, -2, -2]
        }
      ]
    },
    {
      name: '卫生间',
      key: 'bath-room',
      map: getImageHref('map_bath_room.jpg'),
      showSwitch: true,
      mapPos: {
        top: 20,
        left: 45,
        rotate: 120
      },
      hotPoints: []
    },
    {
      name: '走廊',
      key: 'hall',
      map: getImageHref('map_hall.jpg'),
      showSwitch: true,
      mapPos: {
        top: 30,
        left: 70,
        rotate: 80
      },
      hotPoints: []
    }
  ])
  const switchRooms = computed(() => {
    return rooms.value.filter(v => v.showSwitch)
  })
  const room = computed(() => {
    return rooms.value.find(v => v.key === key.value)
  })
  return {
    rooms, switchRooms, key, room
  }
})